<template>
  <div class="loading-test">
    <van-cell-group title="基础展示" inset>
      <van-cell
        title="基础示例"
        clickable
        @click="
          onOpen({
            message: '加载中...',
          })
        "
      />
      <van-cell title="基础示例(无文字提示)" clickable @click="onOpen()" />
      <van-cell
        title="白色主体"
        clickable
        @click="
          onOpen({
            message: '加载中...',
            theme: 'white',
          })
        "
      />
      <van-cell title="多个实例加载" clickable @click="onOpenMore()" />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "loading-test",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    onOpen(options) {
      const loading = this.$loading.create(options);
      setTimeout(() => {
        loading.remove();
      }, 3000);
    },
    onOpenMore() {
      this.$loading.create({ message: "正在载入用户信息..." });
      const p = new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 2000);
      });
      p.then(() => {
        this.$loading.create({ message: "加载相关资料中..." });
        setTimeout(() => {
          this.$loading.create({ message: "页面载入中..." });
          setTimeout(() => {
            this.$loading.remove();
          }, 2000);
        }, 2000);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>